<template>
  <div
    id="editor"
    class="editor"
    :class="{ edit: isEdit }"
    :style="{
      ...getCanvasStyle(canvasStyleData),
      width: changeStyleWithScale(canvasStyleData.width) + 'px',
      height: changeStyleWithScale(canvasStyleData.height) + 'px',
    }"
    @contextmenu="handleContextMenu"
    @mousedown="handleMouseDown"
  >
    <!-- 网格线-->
    <Grid />
    <!-- 页面组件列表展示  -->
    <Shape
      v-for="(item, index) in componentData"
      :key="item.id"
      :default-style="item.style"
      :style="getShapeStyle(item.style)"
      :active="item.id === (curComponent || {}).id"
      :element="item"
      :index="index"
      :class="{ lock: item.isLock }">
      <component
        :is="item.component"
        v-if="item.component.startsWith('SVG')"
        :id="'component' + item.id"
        :style="getSVGStyleData(item.style)"
        class="component"
        :prop-value="item.propValue"
        :element="item"
        :request="item.request"
      />

      <component
        :is="item.component"
        v-else-if="item.component !== 'VText'"
        :id="'component' + item.id"
        class="component"
        :style="getComponentStyle(item.style)"
        :prop-value="item.propValue"
        :element="item"
        :request="item.request"
      />

      <component
        :is="item.component"
        v-else
        :id="'component' + item.id"
        class="component"
        :style="getComponentStyle(item.style)"
        :prop-value="item.propValue"
        :element="item"
        :request="item.request"
        @input="handleInput"
      />
    </Shape>
    <!-- 右键菜单-->
    <ContextMenu />
    <!-- 标线 -->
    <MarkLine />
  </div>
</template>

<script setup lang="ts">
import { getCanvasStyle, getShapeStyle, getSVGStyle } from "@/utils/style.ts";
import { changeStyleWithScale } from "@/utils/translate";
import Grid from "@/components/Editor/Grid.vue";
import MarkLine from "@/components/Editor/MarkLine.vue";
import { useGlobalStore } from "@/store";
import Shape from "@/components/Editor/Shape.vue";
import ContextMenu from "@/components/Editor/ContextMenu.vue";

const globalStore = useGlobalStore();
const canvasStyleData = globalStore.canvasStyleData;
const componentData = globalStore.componentData;
const curComponent = globalStore.curComponent;
const props = defineProps({
  isEdit: {
    type: Boolean,
    default: true
  }
});

const handleContextMenu = () => {
};
const handleMouseDown = () => {
};

const svgFilterAttrs = ["width", "height", "top", "left", "rotate"];
const getSVGStyleData = (style: any) => {
  return getSVGStyle(style, svgFilterAttrs);
};

const getComponentStyle = (style: any) => {
};
const handleInput = (element: any, value: string) => {
};
</script>

<style scoped lang="scss">
.editor {
  position: relative;
  background: #ffffff;

  .lock {
    opacity: .5;

    &:hover {
      cursor: not-allowed;
    }
  }
}

.edit {
  .component {
    outline: none;
    width: 100%;
    height: 100%
  }
}
</style>
